$(function () {
  var form = layui.form;
  initArtCateList();
  // 1.获取文章列表数据
  function initArtCateList() {
    $.ajax({
      url: "/my/article/cates",
      success: function (res) {
        // 2.利用模板引擎渲染页面
        var strHtml = template("tpl-table", res);
        $("tbody").html(strHtml);
      },
    });
  }

  // 3.添加类别注册点击事件
  // 4.5 声明索引等于null
  var indexAdd = null;
  $("#btn").on("click", function () {
    //open 弹出层  4.6 indexAdd 等于这个函数 可以获得索引号
    indexAdd = layer.open({
      title: "添加文章分类",
      // 他ype - 基本层类型
      // 类型：Number，默认：0
      // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
      type: 1,
      area: ["500px", "250px"], //layui 弹出层的宽高
      content: $("#dialog-add").html(),
    });
  });

  // 4.为添加文章类别弹出层 form表单注册submit事件
  // 因为是js动态添加的  所以用到事件委托 委托给他的父亲
  // 通过代理的形式为 form表单绑定事件
  $("body").on("submit", "#form-add", function (e) {
    e.preventDefault();
    //   4.1发送请求
    $.ajax({
      type: "post",
      url: "/my/article/addcates",
      data: $(this).serialize(), //传参 name alias html中name属性
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        //4.2添加成功 之后重新获取数据渲染页面
        initArtCateList();
        // 4.3提示成功
        layui.layer.msg("添加分类成功");
        // 4.4 关闭弹出层
        layer.close(indexAdd); //括号里面是索引号
      },
    });
  });

  // 5.编辑功能
  var indexEdit = null;
  //给编辑按钮注册点击事件  事件委托
  $("body").on("click", ".btn-edit", function () {
    indexEdit = layer.open({
      title: "添加文章分类",
      type: 1,
      area: ["500px", "250px"],
      content: $("#dialog-edit").html(),
    });

    // 5.1获取id值 html页面里的自定义属性  用来根据id获取数据
    var id = $(this).attr("data-id");
    //5.2发起ajax请求获取数据 也就是编辑时候  显示里面本来的值 回显
    $.ajax({
      type: "get",
      url: "/my/article/cates/" + id,
      success: function (res) {
        //5.3 layui  里面快速给表单赋值
        form.val("form-edit", res.data); //注意要在html 的form表单里添加属性lay-filter=""
      },
    });
  });

  //6. 代理方式 给编辑的表单 注册submit事件
  $("body").on("submit", "#form-edit", function (e) {
    e.preventDefault();
    //6.1发送请求
    $.ajax({
      type: "post",
      url: "/my/article/updatecate",
      // 传参的有id 在html页面中 form表单下添加了隐藏域 用来获取ID
      data: $(this).serialize(), //传参 name alias html中name属性
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        // 5.2提示成功
        layui.layer.msg("更新分类成功");
        //5.3添加成功 之后重新获取数据渲染页面
        initArtCateList();
        // 5.4 关闭弹出层
        layer.close(indexEdit); //括号里面是索引号
      },
    });
  });

  //7.删除功能 代理方式 给删除的表单 注册点击事件
  $("body").on("click", ".btn-delete", function () {
    // 6.1获取id值 html页面里的自定义属性  用来根据id获取数据
    var id = $(this).attr("data-id");
    layer.confirm("确认删除吗?", { icon: 3, title: "提示" }, function (index) {
      $.ajax({
        url: "/my/article/deletecate/" + id,
        success: function (res) {
          if (res.status !== 0) return layer.msg(res.message);
          layui.layer.msg("删除分类成功");
          layer.close(index);
          initArtCateList();
        },
      });
    });
  });
});
